<template>
  <modal
    :show-title="false"
    :visible.sync="isShow"
    :left-btn-visible="false"
    @confirm="isShow = false"
    :close-on-click-overlay="false"
    :right-btn-visible="false"
    :content-customer-style="{ padding: '35rpx 0' }"
  >
    <div class="business-container">
      <div style="color: #13131380" class="marginBottom-20 text">
        {{ content }}
      </div>
      <button
        @click="isShow = false"
        class="default-button getPhone"
        :style="{
          borderColor: themeColor,
          backgroundColor: themeColor,
          color: '#fff',
          borderRadius: '44rpx',
          fontSize: '28rpx',
        }"
      >
        确定
      </button>
    </div>
  </modal>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
  },
  data() {
    return {
      isShow: false,
      content: "",
    };
  },
  methods: {
    open(content) {
      this.content = content;
      this.$nextTick(() => {
        this.isShow = true;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.business-container {
  padding: 0 53rpx;
  text-align: left;
  width: 100%;
  .font-red {
    color: red;
  }
  .text {
    margin: 21rpx 0;
    text-align: center;
    font-size: 26rpx;
  }
  .fail {
    font-size: 29rpx;
  }
}
</style>
